<template>
  <div class="rd-swipe">
    <div class="rd-swipe-wrapper">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default{
  props:{
    swipe:{
      type:Object,
      default () {
        return {}
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.rd-swipe{
  width:100%;
  height:12rem;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.rd-swipe-wrapper{
    position: relative;
    width:100%;
    height:100%;
    z-index: 1;
    display: flex;
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    box-sizing: content-box;
  }
.rd-swipe-item,
.rd-swipe-item img {
    width: 100%;
    flex-shrink: 0;
    height: 100%;
}
.rd-swipe-pagination {
    position: absolute;
    bottom: .5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.rd-swipe-pagination-item {
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, .5);
    z-index: 1;
    margin: 4px;
    border-radius: 50%;
}
.rd-swipe-pagination-item.active {
    background: rgba(0, 0, 0, .8);
}
.rd-swipe-pagination-item:hover {
    background: rgba(0, 0, 0, .3);
}
</style>